<template>
	<view class="CollectMoney">
		<uni-search-bar style="background-color: #fff;" radius="5" placeholder="请输入客户名称进行查询" clearButton="always"
			@confirm="search" @cancel="cancel" />
		<view class="container">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lower">
				<view class="cItem" v-for="item in 5">
					<view class="customer">
						客户名称
					</view>
					<view class="line bottomLine">
						<view class="cell">
							<view class="lable">未对金额</view>
							1,220.00
						</view>
						<view class="cell">
							<view class="lable">最近发货</view>
							2023-04-14
						</view>
					</view>
					<view class="line flexRight">
						<uni-tag :inverted="true" text="未对明细" type="primary" />
						<uni-tag :inverted="true" text="已对明细" type="primary" />
						<uni-tag :inverted="true" text="短信对账" type="primary" />
						<uni-tag @click="send('微信')" :inverted="true" text="微信对账" type="primary" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			send(type) {
			},
			// 触底
			lower() {
				if (this.data.length >= this.total) return
				this.$http('post', '/BO/BIllcollection/GetDataList', {
					...this.pagination,
					Search: {
						Condition: 'CustomerId',
						Keyword: uni.getStorageSync('CompanyInfo').Id
					}
				}).then(res => {
					console.log(res);
					if (!res.Success) return this.$api.msg(res.Msg)
					this.data = this.data.concat(res.Data)
					this.total = res.total
				})
			},
			// 查询
			search() {},
			cancel() {},
			getDataList() {
				if (this.data.length >= this.total) return
				this.$http('post', '/BO/BIllcollection/GetDataList', {
					...this.pagination,
					Search: {
						Condition: 'CustomerId',
						Keyword: uni.getStorageSync('CompanyInfo').Id
					}
				}).then(res => {
					console.log(res);
					if (!res.Success) return this.$api.msg(res.Msg)
					this.data = res.Data
					this.total = res.total
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.CollectMoney {
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;

		.container {
			padding: 10px;
			padding-bottom: 0;
			/* #ifdef H5 */
			height: calc(100vh - 165px);
			/* #endif */

			/* #ifdef APP */
			height: calc(100vh - 70px);

			/* #endif */

			.cItem {
				background-color: #fff;
				border-radius: 10px;
				box-sizing: border-box;
				font-weight: 600;
				padding: 15rpx;
				margin-bottom: 20rpx;

				.bottomLine {
					// border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
				}

				.line {
					display: flex;
					height: 60rpx;
					align-items: end;

					.cell {
						flex: 1;
						display: flex;
						justify-content: space-between;
						margin-right: 20rpx;

						.lable {
							width: 60px;
						}

						text {
							flex: 1;
							color: blue;
						}
					}
				}

				.flexRight {
					justify-content: flex-end;

					.uni-tag {

						margin-left: 40rpx;
					}
				}
			}
		}
	}
</style>